<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
  
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #f0f0f0;
    }
    .faq-container {
      width: 60vw;
      max-width: 600px;
      margin: 0 auto;
    }
    .faq {
      position: relative;
      overflow: hidden;
      transition: 0.3s ease;
      margin: 20px 0;
      background-color: transparent;
      border: 1px solid #9fa4a8;
      border-radius: 10px;
      padding: 30px;
    }
    .faq.active {
      background-color: #fff;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    .faq.active::before,
    .faq.active::after {
      content: "\f075";
      font-family: "FontAwesome";
      position: absolute;
      top: 20px;
      left: -30px;
      font-size: 7rem;
      color: #2ecc71;
      opacity: 0.2;
      z-index: 0;
    }
    .faq.active::before {
      color: #3498db;
      top: -10px;
      left: -30px;
      transform: rotateY(180deg);
    }
    .faq-title {
      margin: 0 35px 0 0;
    }
    .faq-text {
      display: none;
      margin: 30px 0 0;
    }
    .faq.active .faq-text {
      display: block;
    }
    .faq-toggle {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 30px;
      right: 30px;
      height: 30px;
      width: 30px;
      cursor: pointer;
      border: 0;
      border-radius: 50%;
    }
    .faq-toggle:focus {
      outline: none;
    }
    .faq-toggle .fa-times {
      display: none;
    }
    .faq.active .faq-toggle {
      background-color: #9fa4a8;
    }
    .faq.active .faq-toggle .fa-times {
      display: block;
      color: #fff;
    }
    .faq.active .faq-toggle .fa-chevron-down {
      display: none;
    }
  </style>
</head>
<body>
  <h1>常见问题解答</h1>
  <div class="faq-container">
    <div class="faq active">
      <h3 class="faq-title">学校： 学费交一下</h3>
      <p class="faq-text">我： 我没学，不交</p>
      <button class="faq-toggle">
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">骗子：我知道你的银行卡密码了</h3>
      <p class="faq-text">我： 我都忘了，告诉我一下</p>
      <button class="faq-toggle">
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">服务员： 第二杯半价</h3>
      <p class="faq-text">我：来一杯第二杯</p>
      <button class="faq-toggle">
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">司机：乘坐公交车两元</h3>
      <p class="faq-text">我： 我站着 谢谢</p>
      <button class="faq-toggle">
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">杀手： 我会亲手杀掉你的爱人</h3>
      <p class="faq-text">我： 我爱你</p>
      <button class="faq-toggle">
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-times"></i>
      </button>
    </div>

    <div class="faq">
      <h3 class="faq-title">老师： 为什么考这么低</h3>
      <p class="faq-text">我：恐高</p>
      <button class="faq-toggle">
        <i class="fa fa-chevron-down"></i>
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>

  <script>
    const toggles = document.querySelectorAll(".faq-toggle");
    toggles.forEach(toggle => {
      toggle.addEventListener("click", () => {
        toggle.parentNode.classList.toggle("active");
      })
    });
  </script>
</body>
</html>